import { Button, Card, Form, Input, Space, Table } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { getHospitalSetList } from '@/api/hospital/hospitalSet'
import type { HospitalList } from '@api/hospital/model/hospitalSetTypes'
import { useNavigate } from 'react-router-dom'

export default function HospitalSet() {
    function finishHandler() {
        console.log(form.getFieldsValue());
        setFields(form.getFieldsValue())

    }
    function resetHandler(){
        form.resetFields()
        setFields(form.getFieldsValue())
    }
    function edit(id:number){
        navigate('/syt/hospital/hospitalSet/edit/' + id)
    }
    const columns: ColumnsType<any> = [
        {
            title: '序号',
            render(value, row, index) {
                return (
                    index + 1
                )
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname'
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode'
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl'
        },
        {
            title: '签名',
            dataIndex: 'signKey'
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName'
        },
        {
            title: '联系人手机',
            dataIndex: 'contactsPhone'
        },
        {
            title: '操作',
            fixed:'right',
            render: (row: any) => {
                return (
                    <Space>
                        <Button type='primary' onClick={()=>edit(row.id)} icon={<EditOutlined />}></Button>
                        <Button type='primary' danger icon={<DeleteOutlined />}></Button>
                    </Space>
                )
            }
        }
    ]
    let [current, setCurrent] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(5)
    let [total, setTotal] = useState<number>(10)
    let [hospitalList, setHospitalList] = useState<HospitalList>([])
    let [fields, setFields] = useState<any>({ hosname: '', hoscode: '' })
    let [form] = Form.useForm()
    let [loading, setLoading] = useState<boolean>(false)
    let navigate = useNavigate()
    const getHospitalListData = async (page: number = current, limit: number = pageSize) => {
        setLoading(true)
        let { records, total } = await getHospitalSetList({ page, limit, ...fields })
        setLoading(false)
        setHospitalList(records)
        setTotal(total)
    }
    useEffect(() => {
        getHospitalListData()
    }, [current, pageSize, fields])
    return (
        <Card>
            {/* 搜索表单 */}
            <Form
                form={form}
                name="basic"
                layout='inline'
                onFinish={finishHandler}
                autoComplete="off"
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item >
                    <Space>
                        <Button loading={loading} type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button onClick={resetHandler} disabled={!fields.hoscode && !fields.hosname}>清除</Button>
                    </Space>
                </Form.Item>
            </Form>
            {/* 批量添加 */}
            <Space className='mt20'>
                <Button type='primary' onClick={()=>navigate('/syt/hospital/hospitalSet/add')}>添加</Button>
                <Button>批量删除</Button>
            </Space>

            {/* 列表 */}
            <Table
                loading={loading}
                className="mt20"
                rowKey={'id'}
                columns={columns}
                dataSource={hospitalList}
                // scroll={{x:2000}}
                pagination={{
                    total,
                    current,
                    pageSize,
                    showSizeChanger: true,
                    pageSizeOptions: [5, 10],
                    showQuickJumper: true,
                    onChange: (page: number, pageSize: number) => {
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            />
        </Card>
    )
}
